<template>
	<view class="progress-box" :style="{'height':height+'rpx'}">
		<view class="progress-bg"></view>
		<view class="progress" :style="{'width':percentage+'%'}">
			<view class="indicator" :style="{'width': height*1.5 + 'rpx','height':height*1.5 + 'rpx'}">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "m-progress",
		props: {
			height: {
				type: Number,
				default: 12
			},
			num1: {
				type:  [Number,String],
				default: 0
			},
			num2: {
				type: [Number,String],
				default: 0
			},

		},
		computed: {
			percentage() {
				let a= this.divide(Number(this.num1),Number( this.num2)) * 100
				if(a>=100){
					return 100
				}
				if(a<0){
					return 0
				}
				return a
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.progress-box {
		width: 100%;
		position: relative;
		max-height: 16rpx;
		overflow: hidden;

		.progress-bg {
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: 1;
			background: #EDEDED;
		}

		.progress {
			border-radius: 20rpx;
			height: 100%;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: 9;
			transition: all .2s;
			background: linear-gradient(90deg, #FA2B47 0%, #FF6619 100%);

			.indicator {
				display: block;
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				border-radius: 100%;
				background: #0AF1FF;
			}
		}
	}
</style>
